<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Gradients Tester " />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Powered by CrossUI No-Code App Builder - Gradients Tester</title>
    <style type="text/css">
    .repeatgradient{
/*      background-image: -webkit-repeating-linear-gradient(45deg, white, green 10px, white 10px);
      background-image:    -moz-repeating-linear-gradient(45deg, white, green 10px, white 10px);
      background-image:     -ms-repeating-linear-gradient(45deg, white, green 10px, white 10px);
      background-image:      -o-repeating-linear-gradient(45deg, white, green 10px, white 10px);
      background-image:         repeating-linear-gradient(45deg, white, green 10px, white 10px);
*/      
      background-image:url(bg.gif);
    }
    </style>

    <script type="text/javascript" src="../runtime/xui/js/xui-debug.js"></script>

</head>

<body class='repeatgradient'>

<table><tr><td>
<div id="divbox1" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox2" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox3" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox4" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox5" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox6" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox7" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox8" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox9" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
</td><td>
<div id="divbox10" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox11" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox12" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox13" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox14" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox15" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox16" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox17" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
</td><td>
<div id="divbox18" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox19" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox20" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox21" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox22" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox23" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox24" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox25" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
<BR>  <div id="divbox26" style="width:200px;height:100px;border:solid 1px;position:relative;overflow:hidden;"><div>Inner</div><div>Node</div></div>
</td></tr></table>

<script type="text/javascript">
xui.main(function(){
  var hash={
        stops:[{
            clr:'#ffffff', 
            pos:'0%', 
            opacity:1
        },{
            clr:'#0000ff', 
            pos:'25%', 
            opacity:1
        },{
            clr:'#00ff00', 
            pos:'50%', 
            opacity:0.8
        },{
            clr:'#ff0000', 
            pos:'75%', 
            opacity:0.8
        },{
            clr:'#00ff00', 
            pos:'100%', 
            opacity:0.5
        }],
        type:'radial',
        rate:1,
        shape: 'circle',
        size: 'farthest-corner'
    }

  hash.orient='LT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox1'),hash);
  hash.orient='T';
  xui.Dom.$setGradients(xui.Dom.byId('divbox2'),hash);
  hash.orient='RT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox3'),hash);
  hash.orient='R';
  xui.Dom.$setGradients(xui.Dom.byId('divbox4'),hash);
  hash.orient='RB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox5'),hash);
  hash.orient='B';
  xui.Dom.$setGradients(xui.Dom.byId('divbox6'),hash);
  hash.orient='LB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox7'),hash);
  hash.orient='L';
  xui.Dom.$setGradients(xui.Dom.byId('divbox8'),hash);
  hash.orient='C';
  xui.Dom.$setGradients(xui.Dom.byId('divbox9'),hash);



  hash.type="linear";
  hash.orient='LT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox10'),hash);
  hash.orient='T';
  xui.Dom.$setGradients(xui.Dom.byId('divbox11'),hash);
  hash.orient='RT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox12'),hash);
  hash.orient='R';
  xui.Dom.$setGradients(xui.Dom.byId('divbox13'),hash);
  hash.orient='RB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox14'),hash);
  hash.orient='B';
  xui.Dom.$setGradients(xui.Dom.byId('divbox15'),hash);
  hash.orient='LB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox16'),hash);
  hash.orient='L';
  xui.Dom.$setGradients(xui.Dom.byId('divbox17'),hash);
  
  
  hash.type="radial";
  hash.shape="ellipse";
  
  hash.orient='LT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox18'),hash);
  hash.orient='T';
  xui.Dom.$setGradients(xui.Dom.byId('divbox19'),hash);
  hash.orient='RT';
  xui.Dom.$setGradients(xui.Dom.byId('divbox20'),hash);
  hash.orient='R';
  xui.Dom.$setGradients(xui.Dom.byId('divbox21'),hash);
  hash.orient='RB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox22'),hash);
  hash.orient='B';
  xui.Dom.$setGradients(xui.Dom.byId('divbox23'),hash);
  hash.orient='LB';
  xui.Dom.$setGradients(xui.Dom.byId('divbox24'),hash);
  hash.orient='L';
  xui.Dom.$setGradients(xui.Dom.byId('divbox25'),hash);
  hash.orient='C';
  xui.Dom.$setGradients(xui.Dom.byId('divbox26'),hash);

    var b = new xui.UI.SButton({caption:"Clear All", left:700, top :20},{onClick:function(){
        for(var i=1;i<=26;i++){
            xui.Dom.$setGradients(xui.Dom.byId('divbox'+i),'linear');
            xui.Dom.$setGradients(xui.Dom.byId('divbox'+i),'radial');
        }
    }});
    b.show();
});
</script>

</body>
</html>